<template>
	<view class="content">
		<!-- f1：自定义导航栏 -->
		<view class="nav">
			<view class="nav-left">
				<uni-icons type="back" size="22" color="#2c2c2c"></uni-icons>
				<view class="userInfo">
					<view class="imgbox">
						<image class="avatar" src="../../static/1.jpg" mode="widthFix"></image>
					</view>
					<text class="username">年糕dodo</text>
				</view>
			</view>
			<view class="nav-right">
				<view class="care" @click="changeCare" :class="iscare?'iscare':''">{{iscare?'已关注':'关注'}}</view>
				<i class="iconfont icon-share"></i>
				<!-- 取消关注提示 -->
				<uni-popup class="popupcare" ref="popup" type="center">
					<view class="handlecare">
						<text>确定不在关注？</text>
						<view class="btn-box">
							<view class="btn" @click="close">取消</view>
							<view class="btn" @click="confirm">确定</view>
						</view>
					</view>
				</uni-popup>
			</view>
		</view>

		<!-- f2：轮播图 -->
		<view class="swiper-box">
			<swiper class="swiper" circular :indicator-dots="indicatorDots">
				<swiper-item v-for="item in swiper">
					<view class="swiper-item">
						<image class="swiper-image" src="../../static/1.jpg" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- f3：内容详情 -->
		<view class="detail-content">
			<text class="title">标题~~~</text>
			<text class="txt">详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情</text>
			<text class="time">2023-02-28</text>
		</view>

		<!-- f4：评论 -->
		<view class="comment-box">
			<text class="title">共{{amount}}条评论</text>
			<view class="comment-list" v-for="i in 10">
				<view class="left">
					<view class="imgbox">
						<image class="avatar" src="../../static/1.jpg" mode="widthFix"></image>
					</view>
					<view class="center border">
						<view class="item">
							<text class="name">年糕dodo</text>
							<text class="content">阿巴阿巴巴巴爸爸爸爸爸爸爸爸阿巴阿巴巴巴爸爸爸爸爸爸爸爸</text>
							<text class="time">2023-02-28</text>
						</view>
						<view class="left">
							<view class="imgbox small">
								<image class="avatar" src="../../static/1.jpg" mode="widthFix"></image>
							</view>
							<view class="center">
								<view class="item">
									<text class="name">momo</text>
									<text class="content">回复<span>年糕dodo</span>：<text>来啦哈！</text></text>
									<text class="time">2023-02-28</text>
								</view>
							</view>
						</view>
						<view class="left">
							<view class="imgbox small">
								<image class="avatar" src="../../static/1.jpg" mode="widthFix"></image>
							</view>
							<view class="center">
								<view class="item">
									<text class="name">momo</text>
									<text class="content">回复<span>年糕dodo</span>：<text>来啦哈！</text></text>
									<text class="time">2023-02-28</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="like">
					<uni-icons :type="isLike?'heart-filled':'heart'" :color="isLike?'#FF2444':''" size="23"
						@click="likeActive"></uni-icons>
					<text class="count">{{count[1]}}</text>
				</view>
			</view>
		</view>

		<!-- f5：底部 -->
		<view class="footer">
			<view class="input-group">
				<input class="input" focus placeholder="说点什么" />
				<i class="iconfont icon-w_shuxie"></i>
			</view>
			<view class="collect handle">
				<uni-icons :type="isCollect?'star-filled':'star'" :color="isCollect?'#FBBD56':''" size="27"
					@click="collectActive"></uni-icons>
				<text class="count">{{count[0]}}</text>
			</view>
			<view class="like handle">
				<uni-icons :type="isLike?'heart-filled':'heart'" :color="isLike?'#FF2444':''" size="23"
					@click="likeActive"></uni-icons>
				<text class="count">{{count[1]}}</text>
			</view>
			<view class="comment handle" @click="toComment">
				<uni-icons type="chat" size="25"></uni-icons>
				<text class="count">{{count[2]}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				swiper: ['A', 'B', 'C', 'D'],
				isCollect: true,
				isLike: false,
				count: [2, 2, 643],
				amount: 7857,
				iscare: false,

			}
		},
		mounted() {

		},
		methods: {
			// 关注
			changeCare() {
				if (this.iscare) {
					this.open()
				} else {
					this.iscare = !this.iscare
				}
			},
			open() {
				this.$refs.popup.open()
			},
			close(){
				this.$refs.popup.close()
			},
			confirm(){
				this.close()
				this.iscare = !this.iscare
			},


			//底部
			collectActive() {
				this.isCollect = !this.isCollect
			},
			likeActive() {
				this.isLike = !this.isLike
			},
			shareToggle() {
				this.$refs.share.open()
			},
			//定位评论
			toComment() {
				uni.createSelectorQuery().select('.comment-box').boundingClientRect(data => {
					uni.createSelectorQuery().select('.content').boundingClientRect(res => {
						uni.pageScrollTo({
							duration: 200, //过渡时间
							scrollTop: data.top - res.top - 20 //置顶
							// scrollTop: res.top
						})
					}).exec()
				}).exec()
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav {
		width: 750rpx;
		height: 100rpx;
		border-bottom: 1px solid $uni-border-color;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 $uni-spacing-row-lg;

		.nav-left,
		.nav-right {
			display: flex;
			align-items: center;
		}

		.nav-left {
			display: flex;
			align-items: center;

			.userInfo {
				margin-left: $uni-spacing-row-base;
				display: flex;
				align-items: center;

				>.imgbox {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: $uni-spacing-row-sm;

					>.avatar {
						width: 100%;
					}
				}

				>.username {
					font-size: $uni-font-size-base;
					font-weight: bold;
				}
			}

		}

		.nav-right {
			display: flex;
			align-items: center;

			.care {
				border: 1px solid #B7223F;
				padding: $uni-spacing-row-sm*0.8 $uni-spacing-row-base*1.2;
				border-radius: 30rpx;
				color: #B7223F;
				font-size: $uni-font-size-sm;
				font-weight: bold;
				font-weight: 400;
			}

			.iscare {
				color: $uni-text-color-placeholder;
				border-color: $uni-text-color-disable;
			}

			.icon-share {
				margin-left: $uni-spacing-row-base*1.2;
				font-size: $uni-font-size-sm*1.5;
			}

			.popupcare {
				.handlecare {
					padding: $uni-spacing-col-lg*2 $uni-spacing-row-lg*2;
					border-radius: $uni-border-radius-lg*2;
					background-color: #fff;
					flex-direction: column;
					width: 660rpx;

					.btn-box {
						justify-content: flex-end;
						margin-top: $uni-spacing-col-lg*3;
						.btn{
							margin-left: $uni-spacing-row-lg*2;
							color: #B7223F;
						}
					}
				}
			}
		}
	}



	.swiper-box {
		width: 750rpx;
		margin-bottom: 50rpx;

		::v-deep .swiper {
			width: 100%;
			height: 1000rpx;

			.swiper-item {
				display: block;
				height: 100%;
				line-height: 300rpx;
				text-align: center;
				overflow: hidden;

				.swiper-image {
					width: 100%;
				}
			}

			.uni-swiper-wrapper {
				position: relative;
				overflow: inherit;

				.uni-swiper-dots {
					position: absolute;
					bottom: -30rpx;
				}
			}
		}
	}

	.detail-content {
		margin: $uni-spacing-row-lg;
		padding-bottom: $uni-spacing-col-lg;
		flex-direction: column;
		position: relative;

		&::before {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 1px;
			content: '';
			-webkit-transform: scaleY(.3);
			transform: scaleY(.3);
			background-color: $uni-border-color;
		}

		.title {
			font-size: $uni-font-size-title;
			font-weight: bold;
			margin-bottom: $uni-spacing-col-lg;
		}

		.txt {
			font-size: $uni-font-size-base;
			letter-spacing: $uni-spacing-row-sm*0.5;
			line-height: $uni-font-size-base*1.5;
		}

		.time {
			margin-top: $uni-spacing-col-lg;
			font-size: $uni-font-size-sm;
			color: $uni-text-color-placeholder;
		}
	}

	.comment-box {
		padding: 0 $uni-spacing-row-lg;
		flex-direction: column;
		margin-bottom: 100rpx;

		.title {
			font-size: $uni-font-size-base;
			color: $uni-text-color-placeholder;
			margin-bottom: $uni-spacing-col-lg;
		}

		.comment-list {
			justify-content: space-between;
			position: relative;
			margin-bottom: $uni-spacing-col-lg;

			.left {
				.imgbox {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: $uni-spacing-row-base;

					.avatar {
						width: 100%;
					}

				}

				.small {
					width: 45rpx;
					height: 45rpx;
				}

				.center {
					flex-direction: column;
					flex: 1;

					.item {
						flex-direction: column;
						margin-bottom: $uni-spacing-col-base;

						.name {
							font-size: $uni-font-size-base;
							color: $uni-text-color-placeholder;
							margin-bottom: $uni-spacing-col-base;
						}

						.content {
							letter-spacing: $uni-font-size-sm*0.2;

							span {
								margin: 0 $uni-spacing-row-sm;
								color: $uni-text-color-placeholder;
								letter-spacing: normal;
							}

						}

						.time {
							margin-top: $uni-spacing-col-sm;
							font-size: $uni-font-size-sm;
							color: $uni-text-color-placeholder;
						}
					}
				}
			}

			&::before {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 1px;
				content: '';
				-webkit-transform: scaleY(.3);
				transform: scaleY(.3);
				background-color: $uni-border-color;
			}

			.like {
				flex-direction: column;
				align-items: center;
				margin-left: $uni-spacing-row-lg;

				.count {
					font-size: $uni-font-size-sm;
				}
			}
		}
	}

	.footer {
		width: 750rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 0;
		padding: $uni-spacing-col-base;
		background-color: $uni-bg-color;

		.input-group {
			position: relative;

			.input {
				width: 300rpx;
				background-color: #E8EAED;
				padding: $uni-spacing-col-base $uni-spacing-row-lg*2;
				font-size: $uni-font-size-base;
				height: $uni-font-size-base*2;
				border-radius: $uni-font-size-base;
			}

			.icon-w_shuxie {
				position: absolute;
				left: $uni-spacing-row-base;
				top: 50%;
				transform: translateY(-50%);

			}
		}

		.handle {
			align-items: center;

			.count {
				font-size: $uni-font-size-base;
			}
		}
	}
</style>
